<template>
  <div class="fans-data-wrapper">
    <div class="title">
      <h2>粉丝数据</h2>
    </div>

    <span></span>

    <div class="fans-chart-wrapper">
      <echart-line ref="fansChart"></echart-line>
    </div>
  </div>
</template>

<script>
import EchartLine from '@c/utils/EchartLine.vue';
import { keydownHandler } from '../../../RTF/utils/handlers/keydown';

  export default {
    data() {
      return {
        fansData: [],
        dateNum: 7,
      }
    },
    components: {
      EchartLine,
    },
    methods: {
      fetchFansData() {
        this.$fetch({
          name: 'fans data',
          url: '/creator/data/fans',
          method: 'GET'
        }).then(res => {
          if(res.data.success) {
            this.fansData = res.data.object;
            this.initChart();
          } else {
            this.$alert({
              type: 'error',
              content: '获取粉丝数据失败'
            })
          }
        }).catch(error => {
            this.$alert({
              type: 'error',
              content: '获取粉丝数据失败'
            })
        })
      },
      initChart() {
        let dates = this.$dateUtils.getRecentDate(this.dateNum);
        let formatDates = dates.map(d => {
          return this.$dateUtils.format(d, "yyyy-MM-dd")
        })
        this.$refs.fansChart.init('日关注量', formatDates, [
          {
            name: '粉丝数',
            data: this.fansData.slice(-1 * this.dateNum)
          },
        ]);
      }
    },
    mounted () {
      this.fetchFansData();
    },
  }
</script>

<style lang="less" scoped>
@w: var(--w);
@fs: calc(@w * 0.01);

.fans-data-wrapper {
  box-sizing: border-box;
  width: @w;

  .title {
    --th: calc(@w * 0.06);
    --fs: calc(var(--th) * 0.4);
    box-sizing: border-box;
    width: @w;
    height: var(--th);
    line-height: var(--th);
    font-size: var(--fs);
    text-indent: var(--fs);
  }

  span {
    display: block;
    width: @w;
    height: 1px;
    background-color: var(--gray);
  }

  .fans-chart-wrapper {
    box-sizing: border-box;
    padding: 2% 5%;

    height: calc(@w * 0.7);
  }
}
</style>